<template>
  <div class="jsa-template-table">
    <div v-if="!template" class="no-data">
      <el-empty description="暂无模板数据" />
    </div>
    <template v-else>
      <div class="table-header">
      <div class="header-row">
        <div class="step-header">
          <h4>基本工作步骤</h4>
        </div>
        <div class="hazard-header">
          <h4>潜在的危险</h4>
        </div>
        <div class="control-header">
          <h4>风险控制措施</h4>
        </div>
      </div>
    </div>
    
    <div class="table-body">
      <div
        v-for="(step, stepIndex) in template?.workSteps || []"
        :key="step.id || stepIndex"
        class="table-row"
      >
        <!-- 工作步骤列 -->
        <div class="step-cell">
          <div class="step-number">{{ stepIndex + 1 }}</div>
          <div class="step-content">
            <div class="step-name">{{ step.stepName }}</div>
          </div>
        </div>
        
        <!-- 潜在危险列 -->
        <div class="hazard-cell">
          <div
            v-for="(hazard, hazardIndex) in getStepHazards(step)"
            :key="hazard.id"
            class="hazard-item"
          >
            <div class="hazard-number">{{ hazardIndex + 1 }}</div>
            <div class="hazard-content">
              <div class="hazard-name">{{ hazard.hazardName }}</div>
            </div>
          </div>
        </div>
        
        <!-- 控制措施列 -->
        <div class="control-cell">
          <div
            v-for="(control, controlIndex) in getStepControls(step)"
            :key="control.id"
            class="control-item"
          >
            <div class="control-number">{{ controlIndex + 1 }}</div>
            <div class="control-content">
              <div class="control-name">{{ control.measureName }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import type { JSATemplate, JSAWorkStep, JSAHazard, JSAControlMeasure } from '@/types'


interface Props {
  template?: JSATemplate
  editable?: boolean
}

const props = defineProps<Props>()

// 获取工作步骤相关的危险
const getStepHazards = (step: JSAWorkStep) => {
  if (!props.template?.workStepHazards) return []
  return props.template.workStepHazards
    .filter(relation => relation.workStep.id === step.id)
    .map(relation => relation.hazard)
}

// 获取工作步骤相关的控制措施
const getStepControls = (step: JSAWorkStep) => {
  const stepHazards = getStepHazards(step)
  const controls: JSAControlMeasure[] = []
  
  if (!props.template?.hazardControls) return []
  
  stepHazards.forEach(hazard => {
    const hazardControls = props.template.hazardControls
      .filter(relation => relation.hazard.id === hazard.id)
      .map(relation => relation.controlMeasure)
    controls.push(...hazardControls)
  })
  
  // 去重
  return controls.filter((control, index, self) => 
    index === self.findIndex(c => c.id === control.id)
  )
}

// 辅助方法已移除，不再需要分类和等级显示
</script>

<style lang="scss" scoped>
.jsa-template-table {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
  background: white;
  
  .no-data {
    padding: 40px;
    text-align: center;
  }
  
  .table-header {
    background: #f5f7fa;
    border-bottom: 2px solid #e4e7ed;
    
    .header-row {
      display: grid;
      grid-template-columns: 0.8fr 1fr 1fr;
      min-height: 80px;
      
      .step-header,
      .hazard-header,
      .control-header {
        padding: 16px;
        border-right: 1px solid #e4e7ed;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        
        &:last-child {
          border-right: none;
        }
        
        h4 {
          margin: 0 0 4px 0;
          font-size: 14px;
          font-weight: 600;
          color: #303133;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }
        
        p {
          margin: 0;
          font-size: 12px;
          color: #606266;
          font-weight: 500;
        }
      }
    }
  }
  
  .table-body {
    .table-row {
      display: grid;
      grid-template-columns: 0.8fr 1fr 1fr;
      border-bottom: 1px solid #e4e7ed;
      
      &:last-child {
        border-bottom: none;
      }
      
      .step-cell,
      .hazard-cell,
      .control-cell {
        padding: 16px;
        border-right: 1px solid #e4e7ed;
        min-height: 120px;
        
        &:last-child {
          border-right: none;
        }
      }
      
      // 工作步骤样式
      .step-cell {
        background: #fafbfc;
        
        .step-number {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 24px;
          height: 24px;
          background: #409eff;
          color: white;
          border-radius: 50%;
          font-size: 12px;
          font-weight: 600;
          margin-bottom: 8px;
        }
        
        .step-name {
          font-size: 16px;
          font-weight: 600;
          color: #303133;
          margin-bottom: 4px;
        }
        
        .step-description {
          font-size: 14px;
          color: #606266;
          line-height: 1.4;
        }
      }
      
      // 潜在危险样式
      .hazard-cell {
        .hazard-item {
          display: flex;
          align-items: flex-start;
          margin-bottom: 12px;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .hazard-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            background: #f56c6c;
            color: white;
            border-radius: 50%;
            font-size: 11px;
            font-weight: 600;
            margin-right: 8px;
            flex-shrink: 0;
          }
          
          .hazard-content {
            flex: 1;
            
            .hazard-name {
              font-size: 14px;
              font-weight: 500;
              color: #303133;
              margin-bottom: 4px;
              line-height: 1.4;
            }
            
            .hazard-description {
              font-size: 12px;
              color: #606266;
              margin-bottom: 6px;
              line-height: 1.3;
            }
            
            .hazard-level {
              .el-tag {
                font-size: 10px;
                padding: 2px 6px;
                height: auto;
                line-height: 1.2;
              }
            }
          }
        }
      }
      
      // 控制措施样式
      .control-cell {
        .control-item {
          display: flex;
          align-items: flex-start;
          margin-bottom: 12px;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .control-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            background: #67c23a;
            color: white;
            border-radius: 50%;
            font-size: 11px;
            font-weight: 600;
            margin-right: 8px;
            flex-shrink: 0;
          }
          
          .control-content {
            flex: 1;
            
            .control-name {
              font-size: 14px;
              font-weight: 500;
              color: #303133;
              margin-bottom: 4px;
              line-height: 1.4;
            }
            
            .control-description {
              font-size: 12px;
              color: #606266;
              margin-bottom: 6px;
              line-height: 1.3;
            }
            
            .control-category {
              .el-tag {
                font-size: 10px;
                padding: 2px 6px;
                height: auto;
                line-height: 1.2;
              }
            }
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .jsa-template-table {
    .table-header .header-row,
    .table-body .table-row {
      grid-template-columns: 1fr;
      
      .step-header,
      .hazard-header,
      .control-header,
      .step-cell,
      .hazard-cell,
      .control-cell {
        border-right: none;
        border-bottom: 1px solid #e4e7ed;
        
        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
}
</style>
